<template>
	<div id="#box">
		<p class="nav">
			<span>当前页面</span>
			<i class="el-icon-arrow-right"></i>
			<span style="margin-right: 100px;">我参加的活动</span>
			<el-input v-model="input" placeholder="请输入内容" style="width: 200px;"></el-input>
			<el-button type="primary" icon="el-icon-search">搜索</el-button>
			<!--<el-button type="success" icon="el-icon-circle-plus-outline" @click='add'>添加</el-button>-->
		</p>
		<div class="center">
			<template>
			  <el-table :data="tableData" border style="width: 100%">
			  	<el-table-column fixed prop="type"  width="50">
			  		  <template slot-scope="scope">
		                  <img style="width: 25px;" v-if="scope.row.type==1" src="../../assets/icon/debate.png">
		                  <img style="width: 25px;" v-if="scope.row.type==2" src="../../assets/icon/sing.png">
		                  <img style="width: 25px;" v-if="scope.row.type==3" src="../../assets/icon/share.png">
		                  <img style="width: 25px;" v-if="scope.row.type==4" src="../../assets/icon/speak.png">
		           </template>
			  	</el-table-column>
			    <el-table-column  prop="topic"  label="活动主题"  width="150"></el-table-column>
			    <el-table-column  prop="num" label="人数"  width="80"> </el-table-column>
			    <el-table-column prop="date"  label="活动时间"  width="120"></el-table-column>
			    <el-table-column  prop="address"  label="地址" width="280"> </el-table-column> 
			    <el-table-column  prop="name" label="发布人" width="80"></el-table-column>
			    <el-table-column  prop="detail" label="描述" width="120"></el-table-column>
			    <el-table-column  prop="condition" label="状态" width="120"></el-table-column>
			    <el-table-column  fixed="right" label="操作" width="100">
			      <template slot-scope="scope">
			        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
			        <el-button @click="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</template>
		</div>	
	</div>
</template>

<script>
	export default{
		data(){
			return{
				 tableData: [{
				 	  topic:'xxx辩论赛',
				 	  num:12,
			          date: '2016-05-02',
			          address: '上海市普陀区金沙江路 1518 弄',
			          name: '王小虎'	,
			          condition:'已结束',
			          detail:'xxx',
			          type:1
			        }, {
			          topic:'xxx辩论赛',
				 	  num:12,
			          date: '2016-05-02',
			          address: '上海市普陀区金沙江路 1518 弄',
			          name: '王小虎',
			          condition:'已结束',
			          detail:'xxx',
			          type:2
			        }, {
			          topic:'xxx辩论赛',
				 	  num:12,
			          date: '2016-05-02',
			          address: '上海市普陀区金沙江路 1518 弄',
			          name: '王小虎',
			          condition:'已结束',
			          detail:'xxx',
			          type:3
			        }, {
			          topic:'xxx辩论赛',
				 	  num:12,
			          date: '2016-05-02',
			          address: '上海市普陀区金沙江路 1518 弄',
			          name: '王小虎',
			          condition:'已结束',
			          detail:'xxx',
			          type:4
			        }],
			        input:''
			}			
		},
		methods:{
			handleClick(row) {
		     	   this.$router.push({path:'/detailActivity'});
		     	   console.log(row);
		     	},
		      deleteRow(index, rows) {
			        rows.splice(index, 1);
			     },
				add(){
					this.$router.push({path:'/addActivity'});
				}
			}
	}
</script>

<style scoped="scoped">
 .nav{
		padding: 10px 20px;
	}
  
  .center{
  	margin-left: 10px;
  	text-align: center;
  	width: 75vw;
  }
</style>